<template>
  <div>
    <el-table :data="skuList" style="width: 100%">
      <el-table-column label="属性组合">
        <el-table-column v-for="(item, index) in skuList[0].attr" :key="index"
                         :label="item.attrName">
          <template #default="scope">
            <span>{{ scope.row.attr[index].attrValue }}</span>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column prop="skuName" label="商品名称" width="180">
        <template #default="scope">
          <el-input v-model="scope.row.skuName"></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="skuTitle" label="标题">
        <template #default="scope">
          <el-input v-model="scope.row.skuTitle"></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="skuSubTitle" label="副标题">
        <template #default="scope">
          <el-input v-model="scope.row.skuSubTitle"></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="price" label="价格">
        <template #default="scope">
          <el-input v-model="scope.row.price" type="number"></el-input>
        </template>
      </el-table-column>
      <el-table-column type="expand">
        <template #default="props">
          <div m="4">
            选择图集:
            <el-radio-group v-model="props.row.skuDefaultImg">
              <el-checkbox-group v-model="props.row.skuImgs">
                <el-row>
                  <el-col
                      v-for="(item) in imgs"
                      :key="item"
                      :span="8"
                  >
                    <el-card :body-style="{ padding: '0px' }">
                      <el-image :src="$imgBaseUrl+item"
                                class="image">
                        <template #error>
                          <div class="image-slot">
                            <el-icon>
                              <icon-picture/>
                            </el-icon>
                          </div>
                        </template>
                      </el-image>
                      <div class="bottom">
                        <el-radio :label="item">设为默认</el-radio>
                        <el-checkbox :label="item" size="large"/>
                      </div>
                    </el-card>
                  </el-col>
                </el-row>
              </el-checkbox-group>
            </el-radio-group>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <div class="foot_class">
    <el-row :gutter="20">
      <el-col :span="3" :offset="6">
        <div>
          <el-button type="primary" @click="last">上一步</el-button>
        </div>
      </el-col>
      <el-col :span="3" :offset="4">
        <div>
          <el-button type="success" @click="next">下一步:保存商品信息</el-button>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import {onMounted, ref, defineProps, defineEmits} from 'vue'
import {Picture as IconPicture} from '@element-plus/icons-vue'

let emits = defineEmits('back', 'pushSkuInfo')
let propData = defineProps({
  SkuList: Array,
  spuImg: Array
})
let skuList = ref([])
let imgs = ref([])

onMounted(() => {
  skuList.value = propData.SkuList
  imgs.value = propData.spuImg
})

function last() {
  emits('back')
}

function next() {
  emits('pushSkuInfo', skuList.value)
}
</script>

<style scoped>
.image {
  width: 100%;
  display: block;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
